<template>
  <view class="play-mv">
    <musicHead title="网易云音乐" icon="true"></musicHead>
    <video
      id="myVideo"
      :src="mvObj.url || ''"
      @error="videoErrorCallback"
      @fullscreenchange="fullscreenchangeCallback"
      controls
      show-center-play-btn
      enable-play-gesture="true"
    ></video>
    <view class="play-mv-detail">
      <view>{{ mvDetail.name }}</view>
      <view>歌曲:{{ mvDetail.artistName }}</view>
      <view>播放次数:{{ mvDetail.playCount | formatCount }}播放</view>
    </view>
  </view>
</template>

<script>
import { mvURL } from "@/api";
export default {
  data() {
    return {
      mvObj: {},
      mvDetail: {},
      isLoding: true,
    };
  },
  onShow() {
    if (!this.videoContext) {
      this.videoContext = uni.createVideoContext("myVideo");
    }
  },
  onLoad(param) {
    // const obj = JSON.parse(param.mvObj);
    const {mvId,artistName,name,playCount} = param;
    const obj = {
      id:mvId,
      artistName,
      name,
      playCount
    }
    // console.log(obj);
    this.getMvUrl(obj.id);
    this.mvDetail = obj;
  },
  onReady(res) {
    this.videoContext = uni.createVideoContext("myVideo");
  },

  onHide() {
    if (this.videoContext) {
      this.videoContext.pause();
      this.videoContext = null;
    }
  },
  onUnload() {
    this.videoContext.pause();
    this.videoContext = null;
  },
  methods: {
    videoErrorCallback(e) {
      console.log(e);
    },

    fullscreenchangeCallback(e) {
      let res = e.detail.fullScreen;
      console.log(res);
    },

    async getMvUrl(id) {
      try {
        let data = (await mvURL(id)) || {};
        this.mvObj = data.data;

        if (this.mvObj.url == "") {
          uni.showToast({
            title: "mv地址不存在",
            duration: 2000,
          });
        }
      } catch (error) {}
    },
  },
};
</script>

<style lang="less" scoped>
page {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 400rpx;
  margin: auto;
}
.play-mv-detail {
  margin: 30rpx;
  view:nth-child(1) {
    font-size: 38rpx;
    margin-bottom: 20rpx;
  }
  view:nth-child(n + 2) {
    font-size: 36rpx;
    color: #646464;
  }
}
</style>